<template>
  <div class="content-container" style="position: relative; min-height: calc(100vh - 60px);">
    <div class="panel">
      <div class="content">
        <div class="condition">
          <el-select style="width: 500px;" placeholder="请选择工单状态" v-model='queryParam.gdzt00'
                     @change="handleGdztChange">
            <el-option v-for="item in gdzt00Options" :key="item.key" :label="item.label"
                       :value="item.value"></el-option>
          </el-select>
        </div>
        <div class="order-list">
          <div class="order-wrapper" :style="item.gdzt00 !== '4' ? {height: '240px'} : {height: '280px'}" v-show="showList" v-for="(item,index) in applyPositionList" :key="index">
            <div class="order-header">
              <span style="font-weight: bold; font-size: 20px">{{ item.gwmc00 }}</span>
              <span style="font-size: 14px">接单时间: {{ item.cjsj00 }}</span>
            </div>
            <div class="order-content">
              <div style="display: flex; gap: 10px; padding-left: 10px;">
                <span style="color: #02BA90; font-weight: bold">{{ gzjsqrOptions[item.gzjsqr] }}</span>
                <span style="color: red; font-weight: bold; padding-left: 10px">{{ lgqyztOptions[item.lgqyzt] }}</span>
                <span style="color: red; font-weight: bold; padding-left: 10px"> {{ bxzt00Options[item.bxzt00] }}</span>
              </div>
              <div class="order-content-item">
                <span class="order-content-label">工作地址:</span>
                <span class="order-content-value">{{ item.gzdz00 }}</span>
              </div>
              <div class="order-content-item">
                <span class="order-content-label">任务状态:</span>
                <span class="order-content-value">{{ jczt00Options[item.jczt00] }}</span>
              </div>
              <div class="order-content-item">
                <span class="order-content-label">薪资:</span>
                <span class="order-content-value">{{ item.jgys00 }}{{ jgdwOptions[item.jgdw00] }}</span>
              </div>
              <div class="order-content-item">
                <span class="order-content-label">工作时间:</span>
                <span v-if="item.gzqssj" class="order-content-value">{{ item.gzqssj.split(" ")[0] + ' ' }}</span>
                <span v-if="item.gzqssj" style="font-size: 14px">{{ item.gzqssj.split(" ")[1] + ' ' }}</span>
                <span v-if="item.gzqssj" style="font-size: 14px;">{{ '到' + ' ' }}</span>
                <span v-if="item.gzqssj">{{ item.gzjzsj.split(" ")[0] + ' ' }}</span>
                <span v-if="item.gzqssj" style="font-size: 14px;">{{ item.gzjzsj.split(" ")[1] }}</span>
                <span v-else class="order-content-value">暂无</span>
              </div>
              <div v-if="item.gdzt00 === '4'" class="order-content-item">
                <span class="order-content-label">原因备注:</span>
                <input class="order-input-item" v-model="item.yy0000" readonly>
              </div>
            </div>
            <div class="content-footer">
              <el-button type="primary" @click.stop="toDetail(item)">详情</el-button>
              <el-button v-if="item.gdzt00 !== '0'" type="success" @click.stop="handlePreview(item)">查看合同</el-button>
              <el-button v-if="item.gdzt00 === '0'" type="danger" @click.stop="handleCancel(item)">取消</el-button>
            </div>
          </div>
          <empty-data-panel v-show="applyPositionList.length === 0" />
        </div>
        <div class="position-page-bar" v-show="applyPositionList.length > 0">
          <button class="btn" v-show="queryParam.page !== 1" @click="pageQuery('last')">上一页</button>
          <button class="btn" v-show="queryParam.page !== queryParam.pageTotal" @click="pageQuery('next')">下一页
          </button>
        </div>
      </div>
    </div>
    <el-dialog title="取消原因" :visible.sync="cancelDialogVisible">
      <el-form ref="cancelForm" :rules="rules" :model="cancelForm" label-width="80px">
        <el-form-item label="取消原因" prop="yy0000">
          <el-input v-model="cancelForm.yy0000" placeholder="请输入" clearable></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="handleSubmit" :loading="submitLoading">确 定</el-button>
        <el-button size="small" @click="handleClose">关 闭</el-button>
      </div>
    </el-dialog>
    <el-dialog title="查看合同" :visible.sync="contractDialogVisible" @close="handleCancelPrint">
      <vue-pdf-embed :source="contractUrl" style="width: 100%; height: fit-content" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCancelPrint">取 消</el-button>
        <el-button type="primary" @click="handlePrint" :loading="printLoading">打 印</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import VuePdfEmbed from "vue-pdf-embed/dist/vue2-pdf-embed.js";
import {orderApi} from "@/api/index.js";

export default {
  name: 'temp-order-center',
  components: {
    VuePdfEmbed
  },
  data() {
    return {
      queryParam: {
        gdzt00: '0',
        page: 1,
        limit: 9,
        pageTotal: 0
      },
      showList: false,
      fullscreenLoading: false,
      ypfsOptions: {
        "1": "主动应聘",
        "2": "雇主邀请"
      },
      yhlxOptions: {
        "1": "个人",
        "2": "企业"
      },
      jgdwOptions: {
        "1": "元/天",
        "2": "元/小时",
        "3": "元"
      },
      lgqyztOptions: {
        "0": "待签约",
        "1": "已签约"
      },
      gzqyztOptions: {
        "0": "待签约",
        "1": "已签约"
      },
      jczt00Options: {
        "0": "未开工",
        "1": "已开工",
        "2": "待验收",
        "3": "已验收",
        "4": "待结算",
        "5": "待确认开工"
      },
      gzjsqrOptions: {
        "0": "未确认",
        "1": "已确认"
      },
      lgjsqrOptions: {
        "0": "未确认",
        "1": "已确认"
      },
      bxzt00Options: {
        "0": "未购买保险",
        "1": "投保单未完成",
        "2": "保险购买成功(待生效)",
        "3": "承保失败",
        "4": "保险已出单",
        "5": "保险保障中",
        "6": "保险已失效",
        "7": "保险已退费"
      },
      gdzt00Options: [
        {
          'label': '待确认',
          'value': '0',
          'key': '0'
        },
        {
          'label': '已接单',
          'value': '1',
          'key': '1'
        },
        {
          'label': '服务中',
          'value': '2',
          'key': '2'
        },
        {
          'label': '已完成',
          'value': '3',
          'key': '3'
        },
        {
          'label': '已取消',
          'value': '4',
          'key': '4'
        }
      ],
      applyPositionList: [],
      cancelDialogVisible: false,
      cancelForm: {
        ypxh00: '',
        yy0000: ''
      },
      rules: {
        yy0000: [
          {required: true, message: '请输入取消原因', trigger: 'blur'},
        ],
      },
      submitLoading: false,
      printLoading: false,
      contractDialogVisible: false,
      contractBase64: '',
      contractUrl: ''
    }
  },
  created() {
    this.queryApplyPositionList()
  },
  methods: {
    queryApplyPositionList() {
      this.showList = false
      orderApi.queryApplyPositionList({...this.queryParam}).then(res => {
        this.showList = true
        this.applyPositionList = []
        res.data.records.forEach((item, index) => {
          setTimeout(() => {
            this.applyPositionList.push(item)
          }, 100 * index)
        })
        this.queryParam.pageTotal = res.data.pageTotal
      }).finally(() => {

      })
    },
    pageQuery(type) {
      if (type === 'next') {
        this.queryParam.page = this.queryParam.page + 1
        this.queryApplyPositionList()
      } else {
        if (this.queryParam.page !== 1) {
          this.queryParam.page = this.queryParam.page - 1
          this.queryApplyPositionList()
        }
      }
    },
    handleGdztChange(val) {
      this.queryParam.gdzt00 = val
      this.queryApplyPositionList()
    },
    toDetail(item) {
      this.$router.push({path: "/temp-order-info", query: {ypxh00: item.ypxh00, gwxh00: item.gwxh00}})
    },
    handleCancel(item) {
      this.cancelForm.ypxh00 = item.ypxh00
      this.cancelDialogVisible = true
    },
    handleSubmit() {
      this.$refs.cancelForm.validate(valid => {
        if (valid) {
          this.submitLoading = true
          orderApi.applyPositionCancel({...this.cancelForm}).then(() => {
            this.$message.success('取消成功')
            this.submitLoading = false
            this.handleClose()
            this.queryApplyPositionList()
          }).catch(() => {
            this.submitLoading = false
          })
        }
      })
    },
    handleClose() {
      this.cancelDialogVisible = false
      this.handleReset()
    },
    handleReset() {
      this.cancelForm = {
        ypxh00: '',
        yy0000: ''
      }
    },
    handlePreview(item) {
      orderApi.getContractBase64({
        ypxh00: item.ypxh00
      }).then(res => {
        if (res.data) {
          this.contractDialogVisible = true
          this.contractBase64 = res.data
          this.contractUrl = 'data:application/pdf;base64,' + res.data
        } else {
          this.$message.warning('当前订单暂无合同')
        }
      })
    },
    async handlePrint() {
      this.printLoading = true
      await window.android.printData(this.contractBase64)
      this.handleCancelPrint()
      this.printLoading = false
    },
    handleCancelPrint() {
      this.contractDialogVisible = false
      this.contractBase64 = ''
      this.contractUrl = ''
    }
  }
}
</script>

<style scoped lang="scss">
/* 定义过渡样式 */
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}

.fade-enter, .fade-leave-to /* .fade-leave-active for <=2.1.8 */
{
  opacity: 0;
}

::v-deep {
  .vue-pdf-embed__page {
    height: 50%;
  }
  .vue-pdf-embed__page canvas {
    height: 50%;
  }
}

.panel {
  overflow-y: hidden;
  display: flex;
  width: 90%;
  margin: 0 auto 10px auto;

  .content {
    flex: 1;
    height: 100%;

    .condition {
      margin-top: 5px;
      position: sticky;
    }

    .order-list {
      margin-top: 30px;
      margin-left: 60px;
      flex-flow: row wrap;
      display: flex;

      .order-wrapper {
        display: flex;
        flex-flow: column;
        width: 380px;
        height: 280px;
        background-color: #f2f2f2;
        box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, 0.5);
        margin: 10px 10px 15px 100px;
        padding-bottom: 10px;
        border-radius: 10px;

        .order-header {
          display: flex;
          padding: 10px;
          justify-content: space-between;
          align-items: start;
        }

        .order-content {
          display: flex;
          font-size: 16px;
          flex-flow: column;
          text-align: left;

          .order-content-item {
            padding: 5px 0 0 10px;
            gap: 10px
          }

          .order-content-label {
            font-weight: bold;
            white-space: nowrap;
          }

          .order-content-value {
            padding-left: 10px;
          }
        }

        .order-input-item {
          font-size: 0.3rem;
          color: black;
          border: none;
          background: linear-gradient(to left, lightsteelblue, lightblue);
          padding: 0.2rem;
        }

        .content-footer {
          margin-top: 10px;
          text-align: center;
        }
      }
    }

    .position-page-bar {
      text-align: center;
      display: flex;
      margin-top: 10px;
      padding-bottom: 10px;

      .btn {
        margin: auto;
        width: 243px;
        height: 63px;
        line-height: 20px;
        border-radius: 16px;
        background-color: rgba(64, 149, 229, 0.8);
        color: rgba(16, 16, 16, 1);
        text-align: center;
        font-family: Roboto;
        border: 1px solid white;
        font-size: 30px;
        color: white;
      }
    }
  }
}
</style>